<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   <style>
       #lunbobox {
           width:500px;
           height:300px;
           position:relative;
       }
       .lunbo {
           width:500px;
           height:300px;
       }
       .lunbo img {
           width:500px;
           height:300px;
           position:absolute;
           top:0px;
           left:0px;
       }
       #lunbobox ul {
           width:285px;
           position:absolute;
           bottom:10px;
           right:0px;
           z-index:5;
       }
       #lunbobox ul li {
           cursor:pointer;
           width:10px;
           height:4px;
           border:1px solid #cccccc;
           float:left;
           list-style:none;
           background:#cccccc;
           text-align:center;
           margin:0px 5px 0px 0px;
       }
       #toleft {
           width:90px;
           height:100px;
           font-size:40px;
           line-height:100px;
           text-align:center;
           color:#f4f4f4;
           position:absolute;
           top:90px;
           left:12px;
           cursor:pointer;
           z-index:99;
           opacity:.8;
       }
       #toright {
           width:90px;
           height:100px;
           font-size:40px;
           line-height:100px;
           text-align:center;
           color:#f4f4f4;
           position:absolute;
           top:90px;
           right:0;
           cursor:pointer;
           z-index:99;
           opacity:.8;
       }

       img{
           width: 400px;
       }
   </style>
</head>
<body>
<div class="middle_right">
    <div id="lunbobox">
        <div id="toleft">
            &lt;</div>
        <div class="lunbo">
            <a href="#"><img src="./01/01.jpg"></a>
            <a href="#"><img src="./01/02.jpg"></a>
            <a href="#"><img src="./01/03.jpg"></a>
            <a href="#"><img src="./01/04.jpg"></a>
            <a href="#"><img src="./01/05.jpg"></a>
        </div>
        <div id="toright">&gt;</div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span></span>
    </div>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <!--<router-link to="/foo">Go to Foo</router-link>-->
            <router-link to="/user/3">Go to Bar</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>

    </div>


</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
   /* // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Bar = { template: '<div>bar</div>' }
    const Foo = { template: '<div>foo</div>' }


    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app');

    // 现在，应用已经启动了！*/
   const User = {
       template: '<div>User {{ $route.params.id }}</div>'
   }
   const router = new VueRouter({
       routes: [
           // 动态路径参数 以冒号开头
           { path: '/user/:id', component: User }
       ]
   })

   // 4. 创建和挂载根实例。
   // 记得要通过 router 配置参数注入路由，
   // 从而让整个应用都有路由功能
   const app = new Vue({
       router
   }).$mount('#app');
</script>
<script>
    var step = 0;
    $('.lunbo a').eq(step).show().siblings().hide();


    $("#toright").on('click',function () {
        ++step;
        console.log(step);
        if(step>4){
            step=0;
        }
        $('.lunbo a').eq(step).show().siblings().hide();
    })
    $("#toleft").on('click',function () {

        console.log(step);
        if(step==0){
            step=4;
        }else{
            step--;
        }
        $('.lunbo a').eq(step).show().siblings().hide();
    })


    Array.prototype.unique = function () {
        var result =[],hask=[];
        this.forEach(function (v) {
           var type = typeof (v);
            hask[v] || (hask[v] = new  Array());
            if(hask[v].indexOf(type)<0){
                hask[v].push(type);
                result.push(v);
            }
        });
        return result;
    }
    var arr = [5,1,'1',2,3,4,4,3,3,1];
    var o = arr.unique();
    console.log(o);
</script>
<!--<script>
    ///轮播
    $(function() {
        //$("#toright").hide();
        //$("#toleft").hide();
        $('#toright').hover(function() {
            $("#toleft").hide()
        }, function() {
            $("#toleft").show()
        });
        $('#toleft').hover(function() {
            $("#toright").hide()
        }, function() {
            $("#toright").show()
        })
    })

    var t;
    var index = 0;
    //自动播放
    t = setInterval(play, 3000)

    function play() {
        index++;
        if (index > 4) {
            index = 0
        }
        // console.log(index)
        $("#lunbobox ul li").eq(index).css({
            "background": "#ff170e",
            "border": "1px solid red"
        }).siblings().css({
            "background": "black",
            "border": ""
        })

        $(".lunbo a ").eq(index).show(1000).siblings().hide(1000);
    };

    ///点击鼠标 图片切换
    $("#lunbobox ul li").click(function() {

        //添加 移除样式
        //$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式   可以在样式中 用hover 来对li 实现
        $(this).css({
            "background": "#999",
            "border": "1px solid #ffffff"
        }).siblings().css({
            "background": "#cccccc"
        })
        var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的
        $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）
    });

    //上一张、下一张切换
    $("#toleft").click(function() {
        index&#45;&#45;;
        if (index <= 0) //判断index<0的情况为：开始点击#toright  index=0时  再点击 #toleft 为负数了 会出错
        {
            index = 4
        }
        console.log(index);
        $("#lunbobox ul li").eq(index).css({
            "background": "#999",
            "border": "1px solid #ffffff"
        }).siblings().css({
            "background": "#cccccc"
        })

        $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）必须要写
    }); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换

    $("#toright").click(function() {
        index++;
        if (index > 4) {
            index = 0
        }
        console.log(index);
        $(this).css({
            "opacity": "0.5"
        })
        $("#lunbobox ul li").eq(index).css({
            "background": "#999",
            "border": "1px solid #ffffff"
        }).siblings().css({
            "background": "#cccccc"
        })
        $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）
    });
    $("#toleft,#toright").hover(function() {
                $(this).css({
                    "color": "black"
                })
            },
            function() {
                $(this).css({
                    "opacity": "0.3",
                    "color": ""
                })
            })
    ///

    ///////鼠标移进  移出
    $("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(
            ////////鼠标移进
            function() {
                $('#toright,#toleft').show()
                clearInterval(t);

            },
            ///////鼠标移开
            function() {
                //$('#toright,#toleft').hide()
                //alert('aaa')
                t = setInterval(play, 3000)

                function play() {
                    index++;
                    if (index > 4) {
                        index = 0
                    }
                    $("#lunbobox ul li").eq(index).css({
                        "background": "#999",
                        "border": "1px solid #ffffff"
                    }).siblings().css({
                        "background": "#cccccc"
                    })
                    $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
                }
            })
</script>-->
</body>
</html>